<!DOCTYPE html>
<html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>相册信息表</title>
    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}">
</head>
<body>


<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">

            <div class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">相册名称：</label>
                        <div class="layui-input-inline mr0">
                            <input name="albumName" id="albumName" placeholder="请输入相册名称" type="text" class="layui-input"/>
                        </div>
                    </div>
<!--                    <div class="layui-inline">-->
<!--                        <label class="layui-form-label">相册类型：</label>-->
<!--                        <div class="layui-input-inline mr0">-->
<!--                            <input name="albumType" id="albumType" placeholder="请输入相册类型" type="text" class="layui-input"/>-->
<!--                        </div>-->
<!--                    </div>-->
                    <div class="layui-inline">
                        <button id="btnSearch" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>
                    </div>
                </div>
            </div>
            <!-- 表格顶部操作列 -->
            <script type="text/html" id="photoalbum-toolbar">
                <div class="layui-btn-container">
                    <button id="btn1Add"  class="layui-btn  layui-btn-sm" lay-event="add">
                        <i class="layui-icon">&#xe654;</i>添加
                    </button>
                </div>
            </script>
            <table class="layui-table" id="photoalbumTable" lay-filter="photoalbumTable"></table>

        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="tableBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs table-icon-font iconfont layui-extend-icon_yulan" lay-tips="查看" lay-event="view">查看</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs table-icon-font layui-icon layui-icon-edit" lay-tips="修改" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs table-icon-font layui-icon layui-icon-delete" lay-tips="删除" lay-event="del">删除</a>

    <!--<a class="layui-btn layui-btn-xs" lay-event="auth">权限分配</a>-->
</script>
<script type="text/javascript" th:src="@{/layui/layui.all.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery-3.2.1.min.js}"></script>
<!-- js部分 -->
<script th:inline="javascript">
    layui.use(['layer', 'form', 'table', 'util'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var util = layui.util;

        //渲染表格
        table.render({
            elem: '#photoalbumTable',
            title:"相册信息表",
            url: '/photoalbum/photoalbum/list',
            toolbar: '#photoalbum-toolbar',
            where: $('form').serialize(),
            page: true,
            cols: [
                [
                {type: 'numbers', title:'序号'},
                {type: 'checkbox'},
                {title: '相册名称', field: 'albumName', align: 'center', valign: 'middle'},
                {title: '创建时间', field: 'createDate', align: 'center', valign: 'middle'},
               /* {field: 'orgType',align: 'center', sort: true, width:140,
                    templet: function (d) {
                        if (d.orgType=="1"){
                            return "区域";
                        } else if (d.orgType=="2"){
                            return "职能部门";
                        }
                    },
                    title: '机构类型'},
                    { field: 'createDate', width:180, sort: true, templet: function (d) {
                    return util.toDateString(d.createDate);
                      },align:'center', title: '创建时间'},
                    */
                {align: 'center', toolbar: '#tableBar',minWidth:170, title: '操作'}
            ]
            ]
        });


        //头工具栏事件
        table.on('toolbar(photoalbumTable)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    showAddModel();
                    break;
                case 'del':
                    if (checkStatus.data.length == 0) {
                        layer.msg('请选择要删除的数据', {icon: 2});
                    } else {
                        var data = checkStatus.data;
                        var id_str="";
                        for (var i=0;i<data.length;i++){
                            id_str +=data[i].id+",";
                        }
                        id_str = id_str.substr(0, id_str.length-1);
                        layer.confirm('真的删除么', function(index){
                            layer.load(2);
                            $.post('photoalbum/batchDelete', {
                                departIds: id_str
                            }, function (data) {
                                layer.closeAll('loading');
                                if (data.code == 200) {
                                    layer.msg(data.msg, {icon: 1});
                                    obj.del();
                                    // table.reload('相册信息表Table');
                                } else {
                                    layer.msg(data.msg, {icon: 2});
                                }
                            });
                        });
                    }
                    break;
                case 'export':
                    if (checkStatus.data.length == 0) {
                        layer.msg('请选择要导出的数据', {icon: 2});
                    } else {
                        table.exportFile(ins1.config.id, checkStatus.data, 'xls');
                    }
                    break;
            };
        });


        // 搜索按钮点击事件
        $('#btnSearch').click(function () {
            table.reload('roleTable', {where: $('form').serialize()});
        });

        // 工具条点击事件
        table.on('tool(photoalbumTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') { //修改
                showEditModel(data);
            } else if (obj.event === 'del') { //删除
                doDelete(obj);
            } else if (obj.event === 'view') {  //查看
                showViewModel(obj.data.id);
            }
        });

        // 删除
        function doDelete(obj) {
            top.layer.confirm('确定要删除吗？', function (index) {
                top.layer.close(index);
                layer.load(2);
                $.post('photoalbum/delete', {
                    photoalbumId: obj.data.id
                }, function (data) {
                    layer.closeAll('loading');
                    if (data.code == 200) {
                        layer.msg(data.msg, {icon: 1});
                        obj.del();
                    } else {
                        layer.msg(data.msg, {icon: 2});
                    }
                });
            });
        }

        // 显示编辑弹窗
        function showEditModel(data) {
            layer.open({
                type: 2,
                title: '修改相册信息表',
                area: ['350px', '380px'],
                content: '/photoalbum/photoalbum/photoalbumupdate/'+data.id,
                end: function () {
                    table.reload('photoalbumTable');  // 成功刷新表格
                }
            });
        }

        // 显示添加弹窗
        function showAddModel(data) {
            layer.open({
                type: 2,
                title: '添加相册信息表',
                area: ['350px', '380px'],
                content: '/photoalbum/photoalbum/photoalbumadd',
                end: function () {
                    table.reload('photoalbumTable');  // 成功刷新表格
                }
            });
        }

        // 查看
        function showViewModel(photoalbumId) {
            layer.open({
                type: 2,
                title: '查看',
                area: ['380px', '455px'],
                content: '/photoalbum/photoalbum/detail/' + photoalbumId
            });
        }
    });

</script>
</body>

</html>